<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/index.css">
</head>

<body>
    <div class="box">
        <!-- 导航栏start -->
        <nav>
            <div class="topnav">
                <div class="leftinp"><input type="text" name="" id="" placeholder="&nbsp;搜素:目的地/酒店/经典/航班号">
                </div>
                <div class="rightwo"><span class="rightimg"></span><span class="rightwode">我的</span></div>
            </div>
        </nav>
        <!-- 导航栏end -->

        <!-- 轮播图start -->
        <div class="banner">
            <div class="bannerimg">
                <ul>
                    <li><img src="./images/banner04.jpg" width="753" height="450" alt=""></li>
                    <li><img src="./images/banner01.jpg" width="753" height="450" alt=""></li>
                    <li><img src="./images/banner02.jpg" width="753" height="450" alt=""></li>
                    <li><img src="./images/banner03.jpg" width="753" height="450" alt=""></li>
                    <li><img src="./images/banner04.jpg" width="753" height="450" alt=""></li>
                    <!-- <li><img src="./images/banner05.jpg" alt=""></li> -->
                    <li><img src="./images/banner01.jpg" width="753" height="450" alt=""></li>
                </ul>
            </div>

            <!-- 小圆点 -->
            <div class="bannerdian">
                <ol>
                    <li class="active"></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ol>
            </div>
        </div>

        <!-- 轮播图end -->

        <!-- 标题start -->
        <div class="title">
            <div class="mintitle">
                <div class="titleimg1"></div>
                <div class="titletext">攻略·经典</div>
            </div>
            <div class="mintitle">
                <div class="titleimg2"></div>
                <div class="titletext">门票·玩乐</div>
            </div>
            <div class="mintitle">
                <div class="titleimg3"></div>
                <div class="titletext">美食林</div>
            </div>
            <div class="mintitle">
                <div class="titleimg4"></div>
                <div class="titletext">周边游</div>
            </div>
            <div class="mintitle">
                <div class="titleimg5"></div>
                <div class="titletext">一日游</div>
            </div>
            <!-- 标题end -->
        </div>

        <!-- 选项start -->
        <div class="xunxian">
            <div class="xun xunxian1">
                <div class="xunxiannei">酒店</div>
                <div class="xunxiannei">机票</div>
                <div class="xunxiannei">旅游</div>
            </div>
            <div class="xun xunxian2">
                <div class="xunxiannei">民宿·客栈</div>
                <div class="xunxiannei">火车票</div>
                <div class="xunxiannei">高铁游</div>
            </div>
            <div class="xun xunxian3">
                <div class="xunxiannei">火车票</div>
                <div class="xunxiannei">汽车·船票</div>
                <div class="xunxiannei">邮轮游</div>
            </div>
            <div class="xun xunxian4">
                <div class="xunxiannei">机票</div>
                <div class="xunxiannei">专车·租车</div>
                <div class="xunxiannei">定制游</div>
            </div>
        </div>
        <!-- 选项end -->

        <!-- 其他start -->
        <div class="qita">
            <div class="qitanei"><span class="qitaimg"></span><span class="qitatext">自由行</span></div>
            <div class="qitanei"><span class="qitaimg"></span><span class="qitatext">WiFi电话卡</span></div>
            <div class="qitanei"><span class="qitaimg"></span><span class="qitatext">保险·签证</span></div>
            <div class="qitanei"><span class="qitaimg"></span><span class="qitatext">换钞·购物</span></div>
            <div class="qitanei"><span class="qitaimg"></span><span class="qitatext">当地向导</span></div>
            <div class="qitanei"><span class="qitaimg"></span><span class="qitatext">特价机票</span></div>
            <div class="qitanei"><span class="qitaimg"></span><span class="qitatext">礼品卡</span></div>
            <div class="qitanei"><span class="qitaimg"></span><span class="qitatext">申卡·借钱</span></div>
            <div class="qitanei"><span class="qitaimg"></span><span class="qitatext">旅游</span></div>
            <div class="qitanei"><span class="qitaimg"></span><span class="qitatext">更多</span></div>
        </div>
        <!-- 其他end -->

        <!-- 特卖start -->
        <div class="temai">
            <div class="temaitop">
                <div class="temaitopleft"></div>
                <div class="temaitopright"><b>更多></b> </div>
            </div>
            <div class="temainei">
                <div class="temaineileft">
                    <div class="temaiimg"></div>
                    <div class="temaitext"> <span>三亚5日自由行(5钻)·节后错峰款【高星度假型酒店合辑·4晚连住】预订赠
                            出行礼遇·网红酒店|唯美海滩|亲子宅玩|海鲜盛宴|惬意泳池|热剧取景地·暖秋当红旅行地 累计超6万人真实出 行！</span> <span>￥1504起</span>
                    </div>
                </div>
                <div class="temaineiright">
                    <div class="temaineirighttop">
                        <div class="texts">
                            <span>千款特价</span>
                            <span>走过路不要错过</span>
                        </div>
                        <span class="imgs"></span>
                    </div>

                    <div class="temaineirightbotleft">
                        <div class="texts">
                            <span>境外精选</span>
                            <span>限时抢购</span>
                        </div>
                        <div class="imgs"></div>
                    </div>

                    <div class="temaineirightbotright">
                        <div class="texts">
                            <span>周边玩乐</span>
                            <span>欢乐度周末</span>
                        </div>
                        <div class="imgs"></div>
                    </div>
                </div>

            </div>
        </div>
        <!-- 特卖end -->

        <!-- 热门活动start -->
        <div class="hosthd">
            <div class="hosthdtop">
                <div class="hosthdtopleft">
                    <span> </span>
                    <span> </span>
                </div>
                <div class="hosthdtopright">
                    <span>获取更多福利> </span>
                </div>
            </div>

            <div class="hostbot">

                <div class="hostbottop">
                    <div class="hostbottopnei">
                        <div class="hostbottopneitext">

                        </div>
                    </div>
                    <div class="hostbottopnei">
                        <div class="hostbottopneitext">

                        </div>
                    </div>
                </div>

                <div class="hostbotcent">
                    <div class="hotbotcentleft"></div>
                    <div class="hotbotcentright"></div>
                </div>

                <div class="hostbotbot">
                    <div class="hostbotbottleft"></div>
                    <div class="hostbotbotright"></div>
                </div>

            </div>
        </div>
        <!-- 热门活动end -->

        <!-- 电话 start -->
        <div class="dianjhua">
            <div class="tubiao tubiao1"><span>☎</span><span>电话</span></div>
            <div class="tubiao tubiao2"><span>↓</span><span>下载客户端</span></div>
            <div class="tubiao tubiao3"><span></span><span>我的</span></div>
        </div>
        <!-- 电话 end -->

        <!-- 结尾start -->
        <div class="boxbtn">
            <div class="boxbtntop">网站地图|<span>☠</span> Language | 电脑版</div>
            <div class="boxbtnbtn">©2021粤嵌H5前端开发|粤ICP备XXXXXXXX号-XXXXXX</div>
        </div>
        <!-- 结尾end -->

        <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
        <script>
            //监听页面滚轮
            $(window).on("scroll", function () {
                // console.log("页面滚动了");
                // console.log($(document).scrollTop());
                var st = $(document).scrollTop();
                if (st > 85) {
                    $("nav").css("background", "skyblue");
                } else {
                    $("nav").css("background", "");
                }
            });


            //轮播图
            //获取一个图片的宽度
            var bannerImgsWidth = $(".bannerimg").width();
            //定义一个图片的位置
            var currentIndex = 1;

            //初始化图片定位
            $(".bannerimg").css("transform", `translateX(-${bannerImgsWidth * currentIndex}px)`);

            //初始化点的定位
            $(".banner .bannerdian ol li").eq(Number(currentIndex) - 1).addClass("active").siblings().removeClass("active");

            //点击小圆圈变换图片
            $(".banner .bannerdian ol li").on("click", function () {
                $(this).addClass("active").siblings().removeClass("active");
                currentIndex = $(this).index() + 1;


                $(".bannerimg").css("transform", `translateX(-${bannerImgsWidth * currentIndex}px)`);
            });



            //不做动画回到第一和最后一个


            //自动播放轮播图
            var timer = null;
            playlunbo();

            //自动播放轮播图
            function playlunbo() {
                if (timer === null) {
                    timer = setInterval(function () {
                        currentIndex++;
                        if (currentIndex <= 5) {
                            $(".bannerimg").css("transition", "transform 1s");
                        }
                        $(".bannerimg").css("transform", `translateX(-${bannerImgsWidth * currentIndex}px)`);

                        $(".banner .bannerdian ol li").eq(Number(currentIndex) - 1).addClass("active").siblings().removeClass("active");
                    }, 2000)
                }
            }

            //暂停播放
            function puselunbo() {
                clearInterval(timer);
                timer = null;
            }


            //动画过渡
            $(".bannerimg").on("transitionend", function () {

                if (currentIndex >= 5) {
                    $(".bannerimg").css("transition", "none");
                    currentIndex = 1;
                    $(".bannerimg").css("transform", `translateX(-${bannerImgsWidth * currentIndex}px)`);

                    $(".banner .bannerdian ol li").eq(Number(currentIndex) - 1).addClass("active").siblings().removeClass("active");
                } else if (currentIndex <= 0) {
                    $(".bannerimg").css("transition", "none");
                    currentIndex = 4;
                    $(".bannerimg").css("transform", `translateX(-${bannerImgsWidth * currentIndex}px)`);

                    $(".banner .bannerdian ol li").eq(Number(currentIndex) - 1).addClass("active").siblings().removeClass("active");
                }
            });



            //定义变量
            var falg = false;
            //点击获取点击的位置
            var epageX = 0;
            //点击获取当前banner移动了多少
            var ban = 0;

            //拖拽了的值
            var i = 0;

            //移动的位置
            var evenpageX = 0;

            //拖动的速度
            var speed = 3;

            //判定是先前移动还是向后移动
            var movex;

            //拖拽事件
            //拖拽开始
            $(".bannerimg").on("touchstart", function (e) {

                puselunbo();
                epageX = e.touches[0].pageX;

                falg = true;

                //获取transform移动了多少的值
                var currTrans = $('.bannerimg').css('-webkit-transform').split(/[()]/)[1];
                var posx = Number(currTrans.split(',')[4]);
                i += posx;

            });

            //拖拽过程
            $(".bannerimg").on("touchmove", function (even) {

                evenpageX = even.touches[0].pageX;
                if (falg) {
                    //向后跑
                    if (epageX > evenpageX) {
                        movex = 0;
                        i -= speed;
                        $(".bannerimg").css("transition", "none");
                        $(".bannerimg").css("transform", `translateX(${i}px)`);
                        if (i <= -3765) {
                            i = -3765;
                        }
                    }
                    //先前跑
                    if (epageX < evenpageX) {
                        movex = 1;
                        i += speed;
                        if (i >= 0) {
                            i = 0;
                        }
                        $(".bannerimg").css("transition", "none");
                        $(".bannerimg").css("transform", `translateX(${i}px)`);
                    }
                    epageX = evenpageX;

                }
            });


            //拖拽结束
            $(".bannerimg").on("touchend", function (e) {
                if (movex == 0) {
                    if (Math.abs(i % 753) > 200) {
                        currentIndex++;
                    }
                } else {
                    if (Math.abs(i % 753) < 500) {
                        currentIndex--;
                    }
                }
                $(".bannerimg").css("transition", "transform 1s");
                $(".bannerimg").css("transform", `translateX(-${bannerImgsWidth * currentIndex}px)`);
                $(".banner .bannerdian ol li").eq(Number(currentIndex) - 1).addClass("active").siblings().removeClass("active");
                falg = false;
                i = 0;
                playlunbo();
            });

        </script>
</body>

</html>